<template>
    <div class="main">

        <MainHeader></MainHeader>

        <div class="logoTitel">项目进度表</div>

        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px">
            <el-form-item label="项目名">
                <el-input v-model="queryParams.name" class="!w-240px" clearable placeholder="请输入项目名" />
            </el-form-item>
            <el-form-item>
                <el-button @click="searchBtn()">搜索</el-button>
                <el-button @click="resetBtn()">重置</el-button>
                <el-button type="primary" @click="handleAddEdit('add')">新增</el-button>
            </el-form-item>
        </el-form>

        <el-tabs type="border-card">
            <el-tab-pane label="进度表">
                <el-table v-loading="loading" :data="lights">
                    <el-table-column align="center" label="项目编号" prop="id" width="150">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="项目名" prop="name" width="300">
                        <template #default="scope">
                            <el-link v-if="scope && scope.row" :underline="false"
                                @click="openDetail(scope.$index, scope.row)">
                                {{ scope && scope.row ? scope.row.name : '无数据' }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="开始时间" prop="start" width="200">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.start) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="完成时间" prop="end" width="200">
                        <template #default="scope">
                            {{ formatDateTime(scope.row.end) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="180">
                        <template #default="scope">
                            <el-button class="proBtnCss" text @click="handleAddEdit('edit', scope.row)">编辑</el-button>
                            <el-button class="proBtnCss" text @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column></el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination" />
            </el-tab-pane>
            <el-tab-pane label="流程表">流程表</el-tab-pane>
        </el-tabs>

        <div class="light-wrap" style="flex-wrap: wrap;padding-right:0px;padding-bottom: 20px;"
            v-if="lightsItem && lightsItem.length > 0">
            <div class="light-wrap-btn">
                <el-form ref="nodeFormRef" :inline="true" :model="nodeParams" class="-mb-15px">
                    <el-form-item label="节点名称">
                        <el-input v-model="nodeParams.name" class="!w-240px" clearable placeholder="请输入节点名称" />
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button @click="nodeParams.name = ''">重置</el-button>
                    </el-form-item> -->
                    <el-form-item>
                        <el-radio-group v-model="switchShowType" @change="switchShow">
                            <el-radio :value="1">从上到下</el-radio>
                            <el-radio :value="3">从下到上</el-radio>
                            <el-radio :value="2">从左到右</el-radio>
                            <el-radio :value="4">从右到左</el-radio>
                            <el-radio :value="99">关闭</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <!-- <el-button type="primary" @click="saveDomBtn()" style="margin-left: 30px;">保存</el-button> -->
            </div>

            <el-alert type="error" show-icon :closable="false"
                v-if="lightsItem[0] && lightsItem[0].message && lightsItem[0].message.length">
                <template #title>
                    <div style="width: 100%;">
                        <span v-for="(msg, idx) in lightsItem[0].message" :key="idx">
                            id：{{ msg.id }}，{{ msg.message }}
                        </span>
                    </div>
                </template>
            </el-alert>

            <el-alert v-if="Object.keys(duplicateNames).length > 0" type="warning" show-icon :closable="true">
                <template #title>
                    <div style="width: 100%;">
                        <div style="font-weight: bold;">温馨提示：检测到以下节点名称存在重复情况。倘若此重复状况对您当前的操作并无实质性影响，您可选择忽略此提示信息，继续进行后续操作。
                        </div>
                        <span v-for="(count, name) in duplicateNames" :key="name" style="margin-right: 4px;">{{ name }}:
                            {{ count }}次；</span>
                    </div>
                </template>
            </el-alert>

        </div>

        <div class="light-wrap"
            :class="{ 'light-wrapHXRL': switchShowType === 4, 'light-wrapHXXS': switchShowType === 3 }">
            <div v-for="(item, index) in lightsItem" :key="index" class="light-item">
                <RecursiveItemSX v-if="[1, 3].includes(switchShowType)" :item="item" :index="index" @editItem="editItem"
                    @deleteItem="deleteItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem"
                    @testIntem="testIntem" @seeNodeDetail="seeNodeDetail" @expandCollapse="expandCollapse"
                    :parentChildrenLength="item.children && item.children.length"
                    @addChildNestedItem="addChildNestedItem" />
                <RecursiveItemHX v-if="[2, 4].includes(switchShowType)" :item="item" :index="index"
                    :lightsItem="lightsItem" @editItem="editItem" @deleteItem="deleteItem"
                    @addBrotherItem="addBrotherItem" @addChildItem="addChildItem" @testIntem="testIntem"
                    @seeNodeDetail="seeNodeDetail" @expandCollapse="expandCollapse"
                    :parentChildrenLength="item.children && item.children.length"
                    @addChildNestedItem="addChildNestedItem" @updateTree="updateTree" @copyItem="copyItem"
                    @pasteItem="pasteItem" :nodeSearHighLight="nodeParams.name" :selectedItem="selectedItem"
                    @selectNode="selectNode" />
            </div>
        </div>

        <EditNameModal :visible="editNameShow" :initial="currentNode" @ok="editNameSave" @cancel="editNameCancel" />

        <AddWorkOrderModal :visible="addDialogVisible" :initial="handleAddEditData"
            @update:visible="addDialogVisible = $event" @add="handleAdd" />

        <NodeDetail :visible="nodeDetailShow" :initial="nodeDetailData" @ok="nodeDetailCancel"
            @cancel="nodeDetailCancel" />

    </div>
</template>

<script setup>
import MainHeader from '@/components/MainHeader.vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import RecursiveItemSX from './components/RecursiveItemSX.vue'
import RecursiveItemHX from './components/RecursiveItemHX.vue'
import EditNameModal from './components/EditNameModal.vue'
import AddWorkOrderModal from './components/AddWorkOrderModal.vue'
import NodeDetail from './components/NodeDetail.vue'
import { formatDateTime, formatDateToISOString, formattedCurrentTime } from "@/utils/format";
import { ElMessage, ElMessageBox } from 'element-plus';
import { v4 as uuidv4 } from 'uuid';
import { debounceFn } from '@/utils/debounce';
import { inject } from 'vue';
const request = inject('request');

const loading = ref(false)
const queryParams = reactive({ name: "", })
const nodeParams = reactive({ name: "", })
const lights = ref([])
const lightsItem = ref([])
const lightsItemId = ref(null);
const editNameShow = ref(false)
const currentNode = ref({})
const addDialogVisible = ref(false)
const nodeDetailShow = ref(false)
const nodeDetailData = ref([])
const handleAddEditType = ref("")
const handleAddEditData = ref({})
const copyNodeItem = ref(null);
const selectedItem = ref(null);  // 选中的节点

onMounted(() => {
    getLights();
    window.addEventListener('keydown', handleKeydown);
    document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
    window.removeEventListener('keydown', handleKeydown);
    document.removeEventListener('click', handleClickOutside);
});

// 添加事件监听
const handleClickOutside = (event) => {
    // 检查点击的区域是否是选中节点的区域
    const selectedNode = document.querySelector('.selected');
    // 如果点击的地方不是选中节点，且不是点击在编辑区域（如输入框或编辑按钮），则取消选中
    if (selectedNode && !selectedNode.contains(event.target)) {
        // 如果点击的区域不包含选中节点，取消选中
        selectedItem.value = null;
    }
};

// 拖拽更新数据
const updateTree = async (oldIndex, newIndex, item) => {
    console.log("外层 updateTree-----------------------------", oldIndex, newIndex, item);
    saveDomBtn();
};

// 获取列表所有数据
const getLights = async () => {
    loading.value = true
    try {
        const res = await request.get('/wordOrder/findByAll', {});
        if (res && res.code === 200) {
            lights.value = res.data;
            total.value = res.data.length;
        }
    } finally {
        loading.value = false
    }
}

// 根据项目名称查询
const searchBtn = async () => {
    if (!queryParams.name) {
        return ElMessage.error('请输入项目名称');
    }
    loading.value = true
    try {
        lights.value = [];
        const res = await request.get('/wordOrder/findByName', queryParams);
        if (res && res.code === 200) {
            lights.value = res.data;
            total.value = res.data.length
        }
    } finally {
        loading.value = false
    }
};

// 搜索条件重置
const resetBtn = () => {
    queryParams.name = '';
    getLights();
};

const handleAddEdit = async (type, row) => {
    handleAddEditType.value = type;
    handleAddEditData.value = row || {};
    addDialogVisible.value = true;
    lightsItem.value = [];
    lightsItemId.value = '';
};
// 确定新增/编辑项目
const handleAdd = async (data) => {
    const dataParam = {
        name: data.name,
        start: formatDateToISOString(data.start),
        end: formatDateToISOString(data.end),
    };

    if (handleAddEditType.value === 'edit') {
        dataParam.id = data.id;
        const res = await request.post('/wordOrder/updateById', dataParam);
        handleResponse(res);
    } else {
        const res = await request.post('/wordOrder/insert', dataParam);
        handleResponse(res);
    }
};

const handleResponse = (res) => {
    if (res && res.code === 200) {
        addDialogVisible.value = false;
        ElMessage.success('操作成功');
        resetBtn();
    }
};

// 打开详情
const duplicateNames = ref({});
const openDetail = async (index, item) => {
    lightsItemId.value = item.id;
    switchShowType.value = 2; // 1; 
    const res = await request.get('/node/getAllNodeById', { projectId: item.id });
    if (res && res.code === 200) {
        const result = sortTreeBySameLevelIndex(res.data);
        const itemArray = [{
            ...result,
            firstLevel: true,
        }];
        lightsItem.value = itemArray;
        getPercentage(item.id);
        tipsDuplicate();
    }
}

// 获取完成百分比
const getPercentage = async (id) => {
    const res = await request.get('/node/completionRate', { projectId: id });
    if (res && res.code === 200) {
        lightsItem.value[0].percent = res.data.toFixed(2) + "%";
        updateNodeAndFatherColor(lightsItem.value);
    }
};

// 删除列表项目
const handleDelete = async (row) => {
    try {
        const confirmResult = await ElMessageBox.confirm(`确定删除 <span style="color: #b88230;">${row.name}</span> 吗？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            dangerouslyUseHTMLString: true,
        });
        if (confirmResult) {
            const res = await request.delete('/wordOrder/deleteById', { id: row.id });
            if (res && res.code === 200) {
                ElMessage.success('删除成功');
                getLights();
            }
        }
    } catch (error) {
        ElMessage({ type: "info", message: "已取消删除" });
    }
};

// 为同级节点元素添加索引sameLevelIndex
const addIndexToTree = (data) => {
    const addIndex = (nodes, parentIndex = 1) => {
        console.log("addIndex", nodes, parentIndex);
        return nodes.map((node, index) => {
            const currentIndex = index + 1;
            const updatedNode = {
                ...node,
                sameLevelIndex: currentIndex,
            };
            if (node.children && node.children.length > 0) {
                updatedNode.children = addIndex(node.children, currentIndex);
            }

            return updatedNode;
        });
    };
    return {
        ...data,
        sameLevelIndex: 1, // 根节点的 sameLevelIndex 固定为 1
        children: addIndex(data.children || []),
    };
};

// 返回数据同级元素未按照sameLevelIndex从小到大排序，按照sameLevelIndex从小到大排序
const sortTreeBySameLevelIndex = (data) => {
    const sortChildren = (node) => {
        if (node.children && node.children.length > 0) {
            node.children.sort((a, b) => Number(a.sameLevelIndex) - Number(b.sameLevelIndex));
            node.children.forEach(sortChildren);
        }
    };
    const sortedData = JSON.parse(JSON.stringify(data));
    sortChildren(sortedData);
    return sortedData;
};

// 保存Dom数据
const saveDomBtn = debounceFn(async (postData) => {
    updateNodeAndFatherColor(lightsItem.value);

    let result = null;
    if (postData && postData.parentId) {
        result = postData;
        delete result.percent;
        delete result.message;
    } else {
        const data = JSON.parse(JSON.stringify(lightsItem.value[0]));
        delete data.percent;
        delete data.message;
        delete data.firstLevel;
        result = addIndexToTree(data);
    }

    deleteStylesFromNode(result);

    console.log("saveDomBtn", result);
    const res = await request.post('/node/save', result); 
    if (res && res.code === 200) {
        // ElMessage.success('保存成功');
    }
}, 300);

// 测试-检查当前节点是否有 styles 属性，如果有，则删除它
const deleteStylesFromNode = (node) => {
    if (Object.prototype.hasOwnProperty.call(node, 'styles')) {
        delete node.styles;
    }
    if (node.children && Array.isArray(node.children)) {
        node.children.forEach(child => deleteStylesFromNode(child));
    }
}

// 方法
const testIntem = (index, item) => {
    currentNode.value = findNode(lightsItem.value, item.id)[0];
    if (currentNode.value) {
        editNameShow.value = true;
    }
};

const editNameSave = async (data) => {
    if (data) {
        currentNode.value = { ...data };
        delete data.children;
        delete data.sameLevelIndex;
        const res = await request.post('/node/update', data);
        if (res && res.code === 200) {
            ElMessage.success('操作成功');
            getPercentage(lightsItemId.value);
            updateNodeAndFatherColor(lightsItem.value, currentNode.value);
            editNameShow.value = false;
        }
    }
};

const editNameCancel = () => {
    editNameShow.value = false;
};

const findNode = (nodes, nodeId) => {
    for (let node of nodes) {
        if (node.id === nodeId) {
            return [node];
        }
        if (node.children && node.children.length > 0) {
            const result = findNode(node.children, nodeId);
            if (result.length > 0) {
                return result;
            }
        }
    }
    return [];
};

const editItem = (index, item) => {
    saveDomBtn(item);
    updateName(lightsItem.value, item.id, item);
    tipsDuplicate();
};

const updateName = (nodes, targetId, newItem) => {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === targetId) {
            nodes[i] = { ...nodes[i], ...newItem };
            return;
        }
        if (nodes[i].children && nodes[i].children.length > 0) {
            updateName(nodes[i].children, targetId, newItem);
        }
    }
};

const updateNodeAndFatherColor = (nodes, updatedNode = null) => {
    nodes.forEach(node => {
        if (updatedNode && node.id === updatedNode.id) {
            node.name = updatedNode.name;
            node.nodeState = updatedNode.nodeState;
        }
        if (node.children && node.children.length > 0) {
            updateNodeAndFatherColor(node.children, updatedNode);
            const nodeStateValues = node.children.map(child => child.nodeState);
            if (nodeStateValues.every(status => status == 1)) {
                node.nodeState = 1;
            } else if (nodeStateValues.every(status => status == 0)) {
                node.nodeState = 0;
            } else {
                node.nodeState = 2;
            }
        } else {
            //   node.nodeState = node.nodeState;
        }
    });
    outermostNode(lightsItem.value);
    tipsDuplicate();
};

const processLights = (lights) => {
    function processNode(node, messages) {
        if (node.errorMessage) {
            messages.push({ id: node.id, message: node.errorMessage, });
        }
        if (node.children && node.children.length > 0) {
            node.children.forEach(child => processNode(child, messages));
        }
    }
    const processedLights = [];
    lights.forEach(node => {
        const newNode = { ...node, message: [] };
        processNode(node, newNode.message);
        processedLights.push(newNode);
    });
    return processedLights;
};

const outermostNode = (nodes) => {
    const promises = nodes.map((node, index, array) => {
        const prevSibling = array[index - 1];
        if (array.length > 1 && prevSibling) {
            const preColor = +prevSibling.nodeState;
            const nodeColor = +node.nodeState;
            if (preColor === 1) {
                node.nodeState = nodeColor;
            } else if (preColor === 2) {
                node.nodeState = nodeColor === 0 ? 0 : 2;
            } else if (preColor === 0) {
                node.nodeState = nodeColor === 0 ? 0 : 2;
            }
        }
        return Promise.resolve(node);
    });
    Promise.all(promises).then(() => {
        lightsItem.value = processLights(nodes);
    }).catch(error => {
        console.error("Error processing nodes:", error);
    });
};

// 删除节点
const deleteItem = async (index, item) => {
    const res = await request.delete('/node/deleteByNodeId', { id: item.id, noToast: true });
    if (res && res.code === 200) {
        lightsItem.value = removeNode(lightsItem.value, item.id);
    } else {
        // 新增子集未点击保存，请求接口，数据库找不到，故失败，删除当前节点
        lightsItem.value = removeNode(lightsItem.value, item.id);
    }
    updateNodeAndFatherColor(lightsItem.value);
};

const removeNode = (nodes, nodeId) => {
    return nodes
        .filter(node => node.id !== nodeId)
        .map(node => ({
            ...node,
            children: node.children ? removeNode(node.children, nodeId) : []
        }));
};

// 选择删除的节点
const selectNode = (index, item) => {
    if (selectedItem.value?.id !== item.id) {
        selectedItem.value = item; // 选中该节点
    }
    // selectedItem.value = selectedItem.value?.id === item.id ? null : item;
    console.log("selectNode", index, item);
};


// 监听键盘删除事件
const handleKeydown = (event) => {
    if (event.key === 'Delete' && selectedItem.value) {
        console.log("删除节点", selectedItem.value);
        deleteItem(null, selectedItem.value);
    }
};

// 新增子节点
const addChildItem = (index, item) => {
    if (!item.children) {
        item.children = [];
    }
    console.log(item.id, "item.id");
    const newItem = {
        name: 'A',
        id: generateUniqueId(),
        parentId: item.id,
        start: formattedCurrentTime(),
        end: '',
        children: [],
        nodeState: 0,
        problem: "",
        // videoList: [],
        // pictureList: [],
        errorMessage: "",
        expanded: true, // 添加展开状态属性
        projectId: lightsItemId.value,
    };
    item.children.push(newItem);
    saveDomBtn(item);
};

// 新增同级节点
const addBrotherItem = (index, item) => {
    const newItem = {
        name: 'A',
        id: generateUniqueId(),
        parentId: item.id,
        start: formattedCurrentTime(),
        end: '',
        children: [],
        nodeState: 0,
        problem: "",
        // videoList: [],
        // pictureList: [],
        errorMessage: "",
        expanded: true, // 添加展开状态属性
        projectId: lightsItemId.value,
    };
    lightsItem.value = addNode([...lightsItem.value], item.id, newItem);
    saveDomBtn();
};

// 递归查找并新增节点到同级
const addNode = (nodes, nodeId, newItem, parentId = null) => {
    return nodes.reduce((acc, node) => {
        const currentNode = { ...node };
        if (node.id === nodeId) {
            newItem.parentId = parentId;
            acc.push(currentNode);
            acc.push(newItem);
        } else {
            if (node.children && node.children.length > 0) {
                currentNode.children = addNode(node.children, nodeId, newItem, node.id);
            }
            acc.push(currentNode);
        }
        return acc;
    }, []);
};

const nodeDetailCancel = () => {
    nodeDetailShow.value = false;
    nodeDetailData.value = [];
};

// 查看节点详情
const seeNodeDetail = (index, item) => {
    const itemCopy = [];
    itemCopy.push(item);
    nodeDetailData.value = itemCopy || [];
    nodeDetailShow.value = true;
};

// 展开/收起节点
const expandCollapse = (index, item) => {
    item.expanded = !item.expanded;
}

// 切换显示
const switchShowType = ref(1)
const switchShow = (e) => {
    if (e === 99) {
        lightsItem.value = [];
        return;
    }
    switchShowType.value = e;
};

// 递归检查并添加子节点
const addChildNestedItemAA = (item, parentId = null) => {
    const newItem = {
        name: 'A',
        id: generateUniqueId(),
        parentId: parentId || item.id,
        start: formattedCurrentTime(),
        end: '',
        children: [],
        nodeState: 0,
        problem: "",
        // videoList: [],
        // pictureList: [],
        errorMessage: "",
        expanded: true,
        projectId: lightsItemId.value,
    };
    if (item.children.length === 0) {
        item.children.push(newItem);
    } else {
        let added = false;
        for (let i = 0; i < item.children.length; i++) {
            if (item.children[i].children.length === 0) {
                addChildNestedItemAA(item.children[i], item.children[i].id);
                added = true;
                break;
            }
        }
        if (!added) {
            addChildNestedItemAA(item.children[item.children.length - 1], item.children[item.children.length - 1].id);
        }
    }

};

// 点击按钮时添加子集
const addChildNestedItem = (index, item) => {
    addChildNestedItemAA(item);
    saveDomBtn(item);
};

// 在生成 UUID 时，检查是否重复
const existingIds = new Set();
const generateUniqueId = () => {
    let id;
    do {
        id = uuidv4();
    } while (existingIds.has(id));
    existingIds.add(id);
    return id;
};

// 复制节点
const copyItem = (index, item) => {
    copyNodeItem.value = JSON.parse(JSON.stringify(item));
    ElMessage.success('复制成功');
};

// 粘贴节点
const pasteItem = (index, item) => {
    if (copyNodeItem.value) {
        const data = generateNewNode(copyNodeItem.value)
        data.parentId = item.id;
        item.children.push(data);
        saveDomBtn();
    } else {
        ElMessage.error('请先复制节点');
    }
};

// 粘贴节点重新生成 id,parentId
const generateNewNode = (element, parentId = null) => {
    if (!element) {
        return null;
    }
    const newNode = {
        ...element,
        id: generateUniqueId(),
        parentId: parentId,
    };
    if (newNode.children && newNode.children.length) {
        newNode.children = newNode.children.map((node) => generateNewNode(node, newNode.id));
    }
    return newNode;
};

// 检查所有name是否重复
const findDuplicateNames = (items) => {
    const nameCount = {};
    items.forEach(item => {
        if (nameCount[item.name]) {
            nameCount[item.name] += 1;
        } else {
            nameCount[item.name] = 1;
        }
        if (item.children && item.children.length > 0) {
            const childrenCounts = findDuplicateNames(item.children);
            for (const name in childrenCounts) {
                if (nameCount[name]) {
                    nameCount[name] += childrenCounts[name];
                } else {
                    nameCount[name] = childrenCounts[name];
                }
            }
        }
    });
    return nameCount;
};
const tipsDuplicate = () => {
    const duplicates = findDuplicateNames(lightsItem.value);
    duplicateNames.value = Object.entries(duplicates).reduce((acc, [name, count]) => {
        if (name && count > 1) { acc[name] = count; }
        return acc;
    }, {});
};


// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = (newPageSize) => {
    pageSize.value = newPageSize;
    getLights();
};
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
    getLights();
};

</script>

<style lang="scss" scoped>
.el-button {
    font-family: var(--global-font-family);
    font-size: var(--global-font-size);
}

.el-radio {
    margin-right: 12px;
}

:deep(.el-button>span) {
    font-size: var(--global-font-size);
}

:deep(.el-dialog.custom-dialog-width) {
    --el-dialog-width: 400px !important;
    width: 400px !important;
}

:deep(.el-table thead tr th) {
    background-color: #f7f9fa;
    font-size: var(--global-font-size);
    font-weight: normal;
    color: var(--global-font-color);
}

:deep(.el-form-item__label) {
    font-size: var(--global-font-size);
}

:deep(.el-table .cell),
:deep(.el-link__inner) {
    font-size: var(--global-font-size);
}

:deep(.el-link) {
    color: var(--global-link-color);
}

.main {
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;

    .el-form--inline .el-form-item {
        margin-right: 12px;
    }

    .logoImg {
        margin-bottom: 4px;
        display: flex;
        justify-content: space-between;
    }

    .logoTitel {
        text-align: center;
        font-weight: normal;
        color: var(--global-font-color);
        margin-bottom: 30px;
        font-size: 22px;
    }

    .light-wrap {
        display: flex;
        overflow-x: auto;
        width: 100%;
        margin-top: 20px;
        padding-right: 240px;
        padding-bottom: 80px;
        box-sizing: border-box;

        /* 自定义滚动条样式 */
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        &::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;

        &.light-wrapHXRL {
            transform: rotate(180deg) scaleY(-1);
        }

        &.light-wrapHXXS {
            transform: scaleY(-1);
        }

        .light-wrap-btn {
            text-align: left;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .light-item {
            text-align: center;
            color: var(--global-font-color);
        }
    }
}

@media (max-width: 768px) {

    :deep(.el-dialog),
    :deep(.el-dialog.custom-dialog-width) {
        --el-dialog-width: 98% !important;
        width: 98% !important;
    }
}

.proBtnCss {
    padding: 0px;
    color: var(--global-link-color);
}
</style>